<template>
  <div>
    <!--注册页面-->
<h1>注册</h1>
<table>
  <!--请输入手机号-->
  <tr>手机号</tr>
  <tr><input type="text" v-model="state.phone"></tr>
  <br>
  <!--请输入密码-->
  <tr>密码</tr>
  <tr><input type="password" v-model="state.pwd"></tr>
  <br>
  <!--请确认两次密码是否一致-->
  <tr>确认密码</tr>
  <tr><input type="password" v-model="state.qpwd"></tr>
  <!--注册按钮-->
  <tr></tr>
  <tr><input @click="login" type="button" value="注册"></tr>
</table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,toRefs} from 'vue';
let state = reactive({
  phone:"",
  pwd:"",
  qpwd:""
})
let { phone,pwd,qpwd} = toRefs(state)
const login = ()=>{
  //验证手机号不能为空
  if(state.phone==""){
  alert("请输入手机号")
  return;
}
//验证密码不能为空
if(state.pwd==""){
  alert("请输入密码")
  return;
}
//验证确认密码不能为空
if(state.qpwd==""){
  alert("请再次输入密码")
  return;
}
//验证两次密码是否一致
if(state.pwd!=state.qpwd){
  alert("两次密码不一致")
  return;
}
//验证手机号长度
if(state.phone.length!=11){
  alert("手机号长度不正确")
  return;
}
//验证手机号和密码是否正确
if(state.phone!='13512349876' && state.pwd!='1234567'){
  alert("手机号或密码错误")
  return;
}
}



</script>

<style scoped>

</style>